<template>
  <div class="app-container">
    <el-card>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="通知标题" prop="title">
          <el-input placeholder="请输入通知标题"
           
           v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item label="通知类型" :prop="form.noticeType === 1 ? 'users' : 'noticeType'">
          <el-radio-group v-model="form.noticeType" @change="changeMessageType">
            <el-radio v-for="(label, index) in messageType" :label="index" :key="index">{{ label }}</el-radio>
          </el-radio-group>

          <el-virtual-transfer width="300px" filterable v-model="form.users" :props="{
        label: 'realname',
        key: 'id',
        disabled: 'disabled'
      }" :titles="['全部用户', '已选择用户']" 
      :filterMethod="filterMethod"
      :data="userList" v-if="1 == form.noticeType"></el-virtual-transfer>
        </el-form-item>

        <el-form-item label="通知内容" prop="noticeContent">
          <editor v-model="form.noticeContent" height="500px" />
        </el-form-item>
        <el-form-item label="状态" prop="enabled">
          <el-switch v-model="form.enabled" :active-value="1" :inactive-value="0">
          </el-switch>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import rules from '@/rules/notice'
import { MESSAGE_TYPE } from '@/constant/const'
import { listUser } from '@/api/user'
import { addNotice, listNoticeUser } from '@/api/notice/notice'
import { filterMethod } from '@/utils/transfer'
export default {
  name: 'NoticEdit',
  data() {
    return {
      form: {
        title: '',
        noticeType: 0,
        noticeContent: undefined,
        enabled: 1
      },
      messageType: MESSAGE_TYPE,
      rules: rules,
      userList: [],
      query: {
        pageNum: 1,
        pageSize: 1000
      }
    }
  },

  created() {
    let data = sessionStorage.getItem('noticeRow')
    console.log('data', data)
    if (!data) {
      return
    }
    data = JSON.parse(data)

    this.form = data;

    if (!this.form.users) {
      this.form.users = [];
    }

    console.log('form', this.form)

    listNoticeUser({ noticeId: data.id }).then((res) => {
      let data = res.data
      this.form.users = data.map((e) => e.userId)
    })
  },

  watch: {
    'form.noticeType': {
      handler: function (val) {
        if (1 == val) {
          this.getUserList()
        }
      },
      immediate: true
    }
  },
  methods: {
    getUserList() {
      listUser(this.query).then((res) => {
        this.userList = res.rows
      })
    },

    /**
     * 穿梭框搜索
     */ 
    filterMethod,

    changeMessageType(value) { },

    submitForm() {

      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        addNotice(this.form).then((response) => {
          this.$message.success('操作成功')
          this.$router.replace('/notice')

        })
      })
    },
    cancel() {
      this.$router.replace('/notice')

    }
  }
}
</script>

<style scoped></style>
